<template>
    <div class="right-poup" @click="hide" :class="{'show':pShow}">
        <div class="poup-warp" @click="prevent($event)">
            <div class="data">
                <slot></slot>
            </div>
            <div class="poup-bottom">
                <span class="set-right" :class="{'nclic':but1disable}" @click="butClice(0)">{{but1text}}</span>
                <span :class="{'nclic':but2disable}" @click="butClice(1)">{{but2text}}</span>
            </div>
        </div>
    </div>
</template>
<script>
/**
 * 功能 从右划出选择弹框 but1text  but1disable but1Click 分别为按钮1的内容 是否禁用 点击事件。同理but2text  but2disable but2Click
 * 注意 该组件是用绝对定位实现，所以需放在顶层且顶层不能有划动条（固定定位在移动端有兼容性问题）
 * @Author: lizuping
 * @Date: 2018-00-00
 * @Last Modified by: lizuping
 * @Last Modified time: 2018-05-16 14:08:51
 */
export default {
    name: 'rightPoup',
    data () {
        return {
            pShow: false
        };
    },
    props: {
        but1text: {
            type: String,
            default () {
                return '重置';
            }
        },
        but1disable: {
            type: Boolean,
            default () {
                return true;
            }
        },
        but2text: {
            type: String,
            default () {
                return '确定';
            }
        },
        but2disable: {
            type: Boolean,
            default () {
                return false;
            }
        }

    },

    // 方法属性
    methods: {
        hide () {
            this.pShow = false;
        },
        show () {
            this.pShow = true;
        },
        prevent (e) {
            e.stopPropagation();
        },
        butClice (n) {
            if (n === 0) {
                this.$emit('but1Click');
            } else if (n === 1) {
                this.$emit('but2Click');
            }
        }
    }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- <style scoped lang="less"> -->
<style>
.right-poup {
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    overflow: hidden;
    transition: ease background-color 360ms, ease z-index 360ms;
}
.right-poup .poup-warp {
    position: absolute;
    width: 72%;
    right: 0;
    height: 100%;
    top: 0;
    background-color: #fff;
    box-sizing: border-box;
    padding-bottom: 1rem;
    transition: ease transform 360ms;
    transform: translate3d(100%, 0, 0);
}
.right-poup .poup-warp .data {
    overflow-y: auto;
    height: 100%;
}
.poup-warp .poup-bottom {
    box-sizing: border-box;
    height: 1rem;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    border-top: 1px solid #dddee3;
}
.poup-warp .poup-bottom span {
    float: left;
    height: 0.7rem;
    border-radius: 0.1rem;
    background-color: #3397ff;
    font-size: 0.34rem;
    color: #fff;
    margin-top: 0.18rem;
    width: 34%;
    margin-left: 10%;
    text-align: center;
    line-height: 0.7rem;
}
.poup-warp .poup-bottom .set-right {
    margin-right: 2%;
}
.right-poup.show {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}
.right-poup.show .poup-warp {
    transform: translate3d(0, 0, 0);
}
.poup-warp .poup-bottom .nclic {
    background-color: #dddee3;
}
</style>
